<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2022.8.3 practice 1</title>
  </head>
  <body>
    <script type="module">
      import * as THREE from "/node_modules/three/build/three.module.js";
      import { OrbitControls } from "/node_modules/three/examples/jsm/controls/OrbitControls.js";
      console.log(THREE);

      // Meta
      const scene = new THREE.Scene();

      // Meta Object
      const geometry = new THREE.BoxGeometry(10, 8, 5);
      const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff,
      });
      const mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      // Light
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
      scene.add(ambientLight);

      const pointLight = new THREE.PointLight(0x0000ff, 0.8);
      pointLight.position.set(30, 30, 10);
      scene.add(pointLight);

      // Camera
      const width = 800;
      const height = 600;
      const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
      camera.position.set(8, 20, 20);
      camera.lookAt(0, 0, 0);

      // Renderer
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      renderer.render(scene, camera);

      //
      document.body.appendChild(renderer.domElement);

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.target.set(10, 0, 0);
      controls.update();

      function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);
      }
      render();
    </script>
  </body>
</html>
